<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>04做一个简单的图表</title>
    <script src="./node_modules/d3/dist/d3.min.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
    </style>
</head>
<body>
</body>
</html>
<script>
    const reactHeight = 25;
    const body = d3.select('body');
    const svg = body.append('svg')
        .attr('width', 500)
        .attr('height', 500)
        .style('border', '1px solid #ccc')
        .style('margin', '100px')
    const dataset = [250, 210, 170, 130, 90];
    body.select('svg')
        .selectAll('rect')
        .data(dataset)
        .enter()
        .append('rect')
        .attr('x', 20)
        .attr('y', function (data, i) {
            return i * reactHeight
        })
        .attr('width', (data) => {
            return data
        })
        .attr('height', reactHeight - 2)
        .attr('fill', '#6bccc4')

</script>
